import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  Button,
  Image,
  StyleSheet,
  Platform,
} from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import { launchImageLibrary } from 'react-native-image-picker';
import { Picker } from '@react-native-picker/picker';

export default function EditProfileScreen() {
  const [username, setUsername] = useState('西瓜');
  const [gender, setGender] = useState('女');
  const [email, setEmail] = useState('192038400032@qq.com');
  const [birthday, setBirthday] = useState('');
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  const [avatar, setAvatar] = useState(null);

  // 显示日期选择器
  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  // 关闭日期选择器
  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  // 处理日期选择
  const handleConfirm = (date) => {
    setBirthday(date.toLocaleDateString());
    hideDatePicker();
  };

  // 选择头像
  const pickImage = () => {
    launchImageLibrary({}, (response) => {
      if (response.assets && response.assets.length > 0) {
        setAvatar(response.assets[0].uri);
      }
    });
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={pickImage}>
        <Image
          source={avatar ? { uri: avatar } : require('@/assets/login/default.png')}
          style={styles.avatar}
        />
        <Text style={styles.changeAvatarText}>点击更换头像</Text>
      </TouchableOpacity>

      <View style={styles.inputContainer}>
        <Text>用户名</Text>
        <TextInput value={username} onChangeText={setUsername} style={styles.input} />
      </View>

      <View style={styles.inputContainer}>
        <Text>性别</Text>
        <Picker
          selectedValue={gender}
          onValueChange={(itemValue) => setGender(itemValue)}
          style={styles.picker}>
          <Picker.Item label="女" value="女" />
          <Picker.Item label="男" value="男" />
        </Picker>
      </View>

      <View style={styles.inputContainer}>
        <Text>生日</Text>
        <TouchableOpacity onPress={showDatePicker}>
          <Text style={styles.input}>{birthday || '完善生日信息'}</Text>
        </TouchableOpacity>
      </View>

      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />

      <View style={styles.inputContainer}>
        <Text>邮箱</Text>
        <TextInput
          value={email}
          onChangeText={setEmail}
          style={styles.input}
          keyboardType="email-address"
        />
      </View>

      <Button
        title="保存"
        onPress={() => {
          /* 保存逻辑 */
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    alignSelf: 'center',
    marginBottom: 10,
  },
  changeAvatarText: {
    textAlign: 'center',
    color: '#007BFF',
    marginBottom: 20,
  },
  inputContainer: {
    marginBottom: 20,
  },
  input: {
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    paddingVertical: 5,
    paddingHorizontal: 10,
    fontSize: 16,
  },
  picker: {
    height: 50,
    width: '100%',
  },
});
